<template>
  <a-card :bordered="false">
    <div ref="crudContentRef">
      <a-table
        :loading="loading"
        :scroll="{ x: '100%', y: '100%' }"
        :columns="columns"
        :pagination="false"
        :data="data" />
    </div>
    <div class="mt-2 text-right" v-if="data.length > 0">
      <a-pagination
        :total="pageObj.total"
        show-total
        show-jumper
        show-page-size
        :page-size-options="[10, 20, 30, 50, 100]"
        @page-size-change="pageSizeChangeHandler"
        @change="pageChangeHandler"
        v-model:current="pageObj.page"
        :page-size="pageObj.pageSize"
        style="display: inline-flex" />
    </div>
  </a-card>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { Message } from '@arco-design/web-vue'
import configApi from '@/api/config'

const pageObj = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
})
const columns = ref([
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Salary',
    dataIndex: 'salary',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
  {
    title: 'Email',
    dataIndex: 'email',
  },
])
const data = ref([])

const pageSizeChangeHandler = async (pageSize) => {
  pageObj.page = 1
  pageObj.pageSize = pageSize
  init()
}
const pageChangeHandler = async (currentPage) => {
  pageObj.page = currentPage
  init(currentPage)
}

const loading = ref(false)
const init = async () => {
  try {
    const res = await configApi.getBannerList({
      pageNum,
      pageSize: pageObj.pageSize,
      status: searchForm.status < 0 ? '' : searchForm.status,
    })

    loading.value = false
    pageObj.total = res.data.total
    pageObj.page = res.data.pageNum
    pageObj.pageSize = res.data.pag
  } catch (error) {
    loading.value = false
  }
}
init()

const crudContentRef = ref(null)
onMounted(async () => {
  await nextTick(() => {
    window.addEventListener('resize', settingFixedPage, false)
    settingFixedPage()
  })
})
const settingFixedPage = () => {
  const workAreaHeight = document.querySelector('.work-area').offsetHeight
  let tableHeight = workAreaHeight - 24 - 32 - 8 - 24
  if (crudContentRef.value) {
    if (crudContentRef.value) {
      crudContentRef.value.style.height = tableHeight + 'px'
    }
  }
}
</script>
